
import React, { useState } from 'react'
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import './index.scss'
import logo from '@/assets/logo.png'
import { useDispatch } from 'react-redux'
import { login } from '@/store/actions/login'
import { useHistory, useLocation } from 'react-router-dom'
export default function Login() {
    const dispatch = useDispatch()
    const history = useHistory()
    const [loading, setLoading] = useState(false)
    const location = useLocation()
    const onFinish = async ({ mobile, code }) => {
        try {
            setLoading(true)
            await dispatch(login(mobile, code))
            message.success('登录成功', 1, () => {
                const { from } = location.state || { from: '/home' }
                history.replace(from)
            })
        } catch {
            message.error('手机号或验证码错误', 1, () => {
                setLoading(false)
            })
        }
    }
    return (
        <div className="login">
            <Card className='login-container'>
                <img src={logo} alt="" className="login-logo" />

                {/* 登录表单 */}
                <Form
                    initialValues={{
                        mobile: '13911111111',
                        code: '246810'
                    }}
                    validateTrigger={['onBlur', 'onChange']}
                    size='large'
                    autoComplete="off"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="mobile"
                        rules={[
                            {
                                required: true,
                                message: '手机号不能为空'
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '手机号格式错误'
                            }
                        ]}
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>

                    <Form.Item
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '验证码不能为空'
                            },
                            {
                                pattern: /^\d{6}$/,
                                message: '验证码格式错误'
                            }
                        ]}
                    >
                        <Input placeholder='请输入验证码' />
                    </Form.Item>

                    <Form.Item
                        name="isAgrees"
                        rules={[
                            {
                                validator: (rule, value) => {
                                    if (value === true) {
                                        return Promise.resolve()
                                    } else {
                                        return Promise.reject(new Error('请阅读并同意协议'))
                                    }
                                }
                            }
                        ]}
                        valuePropName='checked'
                    >
                        <Checkbox className='login-checkbox-label'> 我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
                    </Form.Item>

                    <Form.Item>
                        <Button loading={loading} type="primary" block htmlType='submit'>
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
